<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="images/logo.ico">
</head>
<body>
<div class="box">
    <header>
        <div class="logo">
            <img src="images/logo.png" alt="">
        </div>
    </header>
    <div class="banner">
        <h3>全部商品</h3>
        <span>5</span>
    </div>
    <nav class="clearfix">
        <ul class="nav-1 clearfix left">
            <li>商品</li>
            <li>名称</li>
        </ul>
        <ul class="nav-2 clearfix right">
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
            <li>操作</li>
        </ul>
    </nav>
    <main>
            <ul class="clearfix" id="asd">
                <li class="bw clearfix">
                    <img src="images/m-1.png" alt="" class="left">
                    <div class="wb left">
                        <div class="tw clearfix">
                            <img src="images/jd.png" alt="" class="left">
                            <img src="images/sx.png" alt="" class="left">
                            <p class="left">美仑达 赣南脐橙  颜色：赣南脐橙铂金果 3斤装</p>
                        </div>
                        <p>2017新上市 3斤装 铂金果</p>
                    </div>
                    <span class="left">
                        ￥<span class="price">25.80</span>
                    </span>
                    <div class="er left">
                        <input type="text" value="1" class="num">
                        <p>有货</p>
                    </div>
                    <div class="rt left">
                        <p>￥<span class="total"></span></p>
                        <p>1.68kg</p>
                    </div>
                    <span class="del left ">删除</span>
                </li>
                <li class="clearfix" v-for="mess in message">
                    <img :src="mess.pic" alt="" class="left">
                    <div class="wb left">
                        <div class="tw clearfix">
                            <img :src="mess.pic1" alt="" class="left">
                            <img :src="mess.pic2" alt="" class="left">
                            <p class="left">{{mess.p}}</p>
                        </div>
                        <p>{{mess.p2}}</p>
                    </div>
                    <span class="left">
                        ￥<span class="price">25.80</span>
                    </span>
                    <div class="er left">
                        <input type="text" value="1" class="num">
                        <p>{{mess.p3}}</p>
                    </div>
                    <div class="rt left">
                        <p>￥<span class="total"></span></p>
                        <p>{{mess.p5}}</p>
                    </div>
                    <span class="del left">{{mess.sp2}}</span>
                </li>
            </ul>
    </main>
    <footer>
        <p>
            总价：<b>￥<span id="all"></span></b>
        </p>
    </footer>
</div>


<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>